<template>
    <div>
        <div>
            头像
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8082/user/upload"
                name="fname"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
            </el-upload>
        </div>
        <div style="margin-top: 15px">
            昵称 <el-input v-model="name"></el-input>
        </div>
        <div style="margin-top: 15px">
            <el-button type="primary" @click="updateUserInfo">更新信息</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "basicSetting",
    props: ["user"],
    data() {
        return {
            imageUrl: "",
            name: "",
        };
    },
    created() {
        console.log(this.user);
        this.imageUrl = this.user.portrait;
        this.name = this.user.name;
    },
    methods: {
        updateUserInfo() {
            // if (this.user == null) {
            //     this.$message.warning("用户信息为空");
            //     return;
            // }
            // if (
            //     this.user.portrait == null ||
            //     this.user.name == null ||
            //     this.user.portrait == "" ||
            //     this.user.name == ""
            // ) {
            //     this.$message.warning("请输入用户信息");
            //     return;
            // }

            return this.axios
            .post("http://localhost:8082/user/updateUserInfo",{
                userid: this.user.id,
                portrait: this.imageUrl,
                name: this.name, 
            })
            .then((result) => {
                console.log(result);
                this.$message.success("更新用户信息成功");
                //将登录对象信息更新到本地存储中
                this.user.portrait = this.imageUrl;
                this.user.name = this.name;
                var temp = JSON.parse(localStorage.getItem("user"));
                temp.content = this.user;
                localStorage.setItem("user", JSON.stringify(temp));
            })
            .catch((error) => {
                console.log(error);
                this.$message.error("更新用户信息失败");
            });
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.imageUrl = res.content;
        },
        handleAvatarError(err, file) {
            console.log("上传图片失败" + err);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size /1024 /1024 <2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是JPG格式");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过2MB");
            }
            return isJPG && isLt2M;           
        },
    },
};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

